<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { House, User } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

/**
 * 跳转到指定路径
 * @param {string} path 路径
 */
function go(path: string) {
  router.push(path)
}

/**
 * 判断当前tab是否激活
 * @param {string} path 路径
 * @returns {boolean}
 */
function isActive(path: string) {
  return route.path === path
}
</script>

<template>
  <div class="app-container">
    <router-view class="router-view-container" />
    <nav class="tabbar">
      <div :class="{'active': isActive('/home')}" @click="go('/home')">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </div>
      <div :class="{'active': isActive('/mine')}" @click="go('/mine')">
        <el-icon><User /></el-icon>
        <span>我的</span>
      </div>
    </nav>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  padding-bottom: 56px; /* 为底部tabbar预留空间 */
}

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: #fff;
  display: flex;
  border-top: 1px solid #eee;
  z-index: 100;
}

.tabbar > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  height: 100%;
  transition: var(--transition);
}

.tabbar > div.active {
  color: var(--primary-color);
}

.tabbar .el-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

/* 内容区底部留白，避免被tabbar遮挡 */
.router-view-container {
  padding-bottom: 56px;
}
</style>
